<template>
  <div class="scene-play-plot" @click="nextPage">
    <transition name="fade" v-on:after-enter="afterEnter" v-on:after-leave="afterLeave">
      <div v-if="plotPageShow" v-html="plotPageContent"></div>
    </transition>
    <div class="tip" v-if="plotPagetipShow">{{ $t('interface.plot.naxt_page_tip') }}</div>
  </div>
</template>

<script>
import Plot from '@/game/plot'

export default {
  name: 'ScenePlayPlot',

  data() {
    return {
      plotId: '',
      plotPageCount: 0,
      plotPageContentArray: [],
      plotPageContent: '',
      plotPageCurrent: 0,
      plotPageShow: false,
      plotPageNextAllow: false,
      plotPagetipShow: false,
      plotPagetipShowClock: 0,
    }
  },

  mounted() {
    this.plotId = this.$store.state.gameData.state.polt.name
    this.plotPageContentArray = Plot(this)[this.plotId].content
    this.plotPageCount = this.plotPageContentArray.length
    this.plotPageContent = this.plotPageContentArray[0]
    this.plotPageShow = true
    this.plotEndFlag = false
  },

  methods: {
    nextPage() {
      if (!this.plotPageNextAllow)
        return

      if (this.plotPageCurrent < (this.plotPageCount - 1)) {
        this.plotPageNextAllow = false
        this.plotPagetipShow = false
        this.plotPageCurrent = this.plotPageCurrent + 1
        this.plotPageContent = this.plotPageContentArray[this.plotPageCurrent]
        this.plotPageShow = false
      }
      else {
        console.log('end')
        this.plotPageNextAllow = false
        this.plotPagetipShow = false
        this.plotPageShow = false
        this.plotEndFlag = true
      }
    },
    afterEnter() {
      console.log('enter')
      this.plotPageNextAllow = true
      clearTimeout(this.plotPagetipShowClock);
      this.plotPagetipShowClock = setTimeout(() => { this.plotPagetipShow = true }, 1000)
    },
    afterLeave() {
      console.log('leave')
      this.plotPageShow = true
      if (this.plotEndFlag) {
        this.$store.commit('updateScene', 'play-main')
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.scene-play-plot {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  font-size: 38px;
  color: #F7FFF7;
  background-color: #1C1C1C;
  text-align: center;
  .tip {
    position: absolute;
    bottom: 44px;
    width: 100%;
    font-size: 18px;
    text-align: center;
    color: #AAAAAA;
    animation: blink 2s infinite;
  }
}

.fade-enter-active {
  transition: opacity .4s ease-in;
}

.fade-leave-active {
  transition: opacity .4s ease-out;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 100;
  }
  100% {
    opacity: 0;
  }
}
</style>
